import React,{ Component , Fragment} from 'react';
import { withRouter } from 'react-router-dom'
import cities from '../../assets/cities/cities';
import $ from 'jquery';
import './cities.css'
class CitiesItem extends Component{
    constructor(props){
        super(props);
        this.state={
            //cities:cities

        }
    }
    // componentDidMount(){
    //     $(document).on('click','.cities-item>li',()=>{
    //         console.log($(this).text())
    //     })
    // }

    showLists=(cityObject)=>{
        let cityArray = Object.entries(cityObject);
        return (
            cityArray.map((item,index) => {
                return(
                    <li onClick={this.getCitiesName}>{item[0]}</li>
                )
            })
        )
    }
    getCitiesName=(e)=>{
        // console.log(e.target.innerHTML)
        this.props.history.push({
            pathname:'/',
            query:e.target.innerHTML
        })
        sessionStorage.setItem('cityName',e.target.innerHTML)
    }

    render(){
        let {config} = this.props;
        let title = config[0];
        let cityArray = config[1];
        return(
            <Fragment>
                <div className='cities-container'>
                    <h2>{title}</h2>
                    <ul className='cities-item'>
                        {this.showLists(cityArray)}
                    </ul>
                </div>
            </Fragment>
        )
    }
}
export default withRouter(CitiesItem)
